<template>
  <view
    :class="[
      'cover',
      showCover ? '' : 'hidden',
      indexChange ? 'indexHidden' : '',
    ]"
  >
    <view class="content">
      <image src="../../../static/image/logo.png" class="logo"></image>
      <view class="title">校寻Plan</view>
      <view class="introduce">轻 | 松 | 寻 | 找 | 你 | 的 | 伙 | 伴</view>
    </view>
    <view class="modules">
      <view class="line"> 寻找适合自己的伙伴 | 组建自己的队伍 </view>
      <view class="line"> 集成ToDoList任务模块 | 支持队伍之间任务分配 </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "Cover",
  props: {
    showCover: Boolean,
  },
  data() {
    return {
      indexChange: false,
    };
  },

  watch: {
    showCover(newValue) {
      if (!newValue) {
        setTimeout(() => {
          this.indexChange = true;
        }, 1000);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.cover {
  position: fixed;
  height: 100vh;
  width: 100vw;
  top: 0;
  z-index: 999999;
  background-color: #fff;
  color: #05a47d;
  transition: all 0.3s;
  opacity: 1;
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 200rpx;
    .logo {
      width: 150rpx;
      height: 150rpx;
      margin-bottom: 20rpx;
    }
    .title {
      font-size: 50rpx;
      font-weight: 500;
    }
  }

  .modules {
    width: 550rpx;
    font-size: 24rpx;
    position: absolute;
    bottom: 50rpx;
    left: 50%;
    text-align: center;
    transform: translateX(-50%);
    .line {
      margin-top: 10rpx;
    }
  }
}
.hidden {
  transform: scale(1.2);
  opacity: 0;
}
.indexHidden {
  z-index: -10000000 !important;
}
</style>
